<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>component slot</title>
	<script src="js/vue.js"></script>
</head>
<body>
	<div id="app">
        <div>
            <h1>父组件标题</h1>
            <child-component>
                <h1>父组件插槽标题</h1>
                <p>父组件插槽内容</p>
            </child-component>
            <p>父组件内容</p>
        </div>

        <div>
            <h1>具有名插槽测试</h1>
            <child-name-slot>
                <label slot="slotA">插槽a</label>
                <label>默认插槽</label><br>
                <div class="d1">
                    <h1>父组件标题</h1>
                    <child-component>
                        <h1>父组件插槽标题</h1>
                        <p>父组件插槽内容</p>
                    </child-component>
                    <p>父组件内容</p>
                </div>
                <label slot="slotB">插槽b</label>
                <div class="d2">
                    <h1>父组件标题</h1>
                    <child-component>
                        <h1>父组件插槽标题</h1>
                        <p>父组件插槽内容</p>
                    </child-component>
                    <p>父组件内容</p>
                </div>
            </child-name-slot>
        </div>

        <div class="scope-test">
            <div class="parent">
                <child-scope-slot>
                    <template slot-scope="slotScope">
                        <span>作用域插槽开始</span><br>
                        <span>{{slotScope.hello}}</span><br>
                        <span>作用域插槽结束</span><br>
                        <span>{{slotScope.hi}}</span><br>
                    </template>
                </child-scope-slot>
            </div>
        </div>

        <div class="ele-scope">
            <ele-scope-slot :items="items">
                <li slot="item" slot-scope="item" class="menuLi"><a v-bind:href="item.src">{{item.text}}</a></li>
            </ele-scope-slot>
        </div>

        <div>
            <component v-bind:is="currentView">
            </component>
        </div>
	</div>

    <div id="app1">
        <component v-bind:is="home"></component>
        <component v-bind:is="head"></component>
        <component v-bind:is="end"></component>
    </div>
<script>
    (function () {
        Vue.component('child-component',{
            template: '<div ><h1>子组件标题</h1><p>子组件内容</p><slot></slot></div>'
        });

        Vue.component('child-name-slot',{
            template: '<div class="name-slot"><span>插槽:slotA:</span><slot name="slotA"></slot><br>' +
            '<span>插槽:slotB:</span><slot name="slotB"></slot><br>' +
            '<span>插槽:slotDefault:</span><slot></slot><br></div>'
        });

        Vue.component('child-scope-slot',{
            template: '<div class="child"><slot hello="hello from child" hi="hi from child"></slot></div>'
        });

        Vue.component('ele-scope-slot',{
            props:{
                items:{
                    type:Array
                }
            },
            template: '<ul> <slot name="item" v-for="item in items" :text="item.text" :src="item.src"></slot></ul>'
        });

    })();

    var Home = {
        template: '<p>Welcome home!</p>'
    }

	new Vue({
		el: '#app',
        data:{
            items:[{text:'系统管理',src:'/manager/system/list'},
                {text:'角色管理',src:'/manager/role/list'},
                {text:'资源管理',src:'/manager/resource/list'},
                {text:'代码管理',src:'/manager/code/list'}],
            currentView: Home,
            comtext:'hello home!'

        }
	});

    new Vue({
        el: '#app1',
        data:{
            head:'c-head',
            home:'c-home',
            end:'c-end'
        },
        components:{
            'c-home':{
                template:'<p>hello home!</p>'
            },
            'c-head':{
                template:'<p>hello head!</p>'
            },
            'c-end':{
                template:'<p>hello end!</p>'
            },
        }
    });
</script>
</body>
</html>